import { useSelector, useDispatch } from "react-redux";
import { useEffect, useRef } from "react";
import SpeedDashBoard from "../../components/SpeedDashBoard";
import DeviceInfo from "../../components/DeviceInfo";
import "./index.css";
import { Button } from "antd";

export default function Echarts() {
  const speedData = {
    series: [
      {
        type: "gauge",
        axisLine: {
          lineStyle: {
            width: 40,
            color: [
              [0.5, "#67e0e3"],
              [0.7, "#37a2da"],
              [1, "#fd666d"],
            ],
          },
        },
        axisTick: {
          distance: -50,
          length: 10,
          lineStyle: {
            color: "#fff",
            width: 1,
          },
        },
        splitLine: {
          distance: -55,
          length: 15,
          lineStyle: {
            color: "#fff",
            width: 3,
          },
        },
        axisLabel: {
          color: "#fff",
          distance: 6,
          fontSize: 18,
        },
        detail: {
          valueAnimation: true,
          // formatter: "{value} km/h",
          formatter: "km/h",
          color: "#fff",
          fontSize: "16px",
        },
        anchor: {
          show: true,
          size: 20,
          itemStyle: {
            borderColor: "#d1d1d1",
            borderWidth: 2,
            color: "#d1d1d1",
          },
        },
        pointer: {
          offsetCenter: [0, "20%"],
          icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
          length: "115%",
          width: "10px",
          itemStyle: {
            color: "#d1d1d1",
          },
        },
        title: {
          fontSize: "16px",
          color: "#fff",
          offsetCenter: ["0%", "-40%"],
        },
        data: [
          {
            value: 0,
            name: "速度",
          },
        ],
      },
    ],
  };
  const rotateSpeedData = {
    series: [
      {
        type: "gauge",
        min: -10,
        max: 10,
        splitNumber: 10,
        axisLine: {
          lineStyle: {
            width: 20,
            color: [
              [0.75, "#67e0e3"],
              [0.85, "#37a2da"],
              [1, "#fd666d"],
            ],
          },
        },
        axisTick: {
          distance: -25,
          length: 5,
          lineStyle: {
            color: "#fff",
            width: 1,
          },
        },
        splitLine: {
          distance: -30,
          length: 8,
          lineStyle: {
            color: "#fff",
            width: 2,
          },
        },
        axisLabel: {
          color: "#fff",
          distance: 0,
          fontSize: 13,
        },
        detail: {
          valueAnimation: true,
          formatter: "x1000r/m",
          color: "#fff",
          fontSize: "15px",
        },
        anchor: {
          show: true,
          size: 10,
          itemStyle: {
            borderColor: "#d1d1d1",
            borderWidth: 2,
            color: "#d1d1d1",
          },
        },
        pointer: {
          offsetCenter: [0, "20%"],
          icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
          length: "115%",
          itemStyle: {
            color: "#d1d1d1",
          },
        },
        title: {
          fontSize: "16px",
          color: "#fff",
        },
        data: [
          {
            value: 0,
            name: "M1转速",
            title: {
              offsetCenter: ["0%", "-40%"],
            },
          },
        ],
      },
    ],
  };
  const infoList = [
    {
      name: "M1电机转矩",
      title: "M1电机转矩",
      value: "------",
    },
    {
      name: "M1电机电流",
      title: "M1电机电流",
      value: "------",
    },
    {
      name: "M2电机转矩",
      title: "M2电机转矩",
      value: "------",
    },
    {
      name: "M1电机温度",
      title: "M1电机温度",
      value: "------",
    },
    {
      name: "M2电机温度",
      title: "M2电机温度",
      value: "------",
    },
    {
      name: "电池最高温度",
      title: "电池最高温度",
      value: "------",
    },
    {
      name: "电池最低温度",
      title: "电池最低温度",
      value: "------",
    },
    {
      name: "急停开关",
      title: "急停开关",
      value: "------",
    },
    {
      name: "自检",
      title: "自检",
      value: "------",
    },
    {
      name: "航向角",
      title: "航向角",
      value: "------",
    },
  ];

  return (
    <>
      <div className="justify_between">
        <DeviceInfo className="column_1 deviceInfo">
          {infoList.map((item) => {
            return (
              <div className="grid-item justify_between listItem1">
                <span>{item.title}:</span>
                <span>{item.value}</span>
              </div>
            );
          })}
        </DeviceInfo>
        <div className="controlPanel p_lg">
          <div className="justify_between">
            <span className="iconfont icon-leftArrow icon"></span>
            <span className="iconfont icon-rightArrow icon"></span>
          </div>
          <h1
            style={{
              fontSize: "40px",
              textAlign: "center",
              marginTop: "100px",
            }}
          >
            —— ——km/h
          </h1>
        </div>
        <DeviceInfo className="column_1 deviceInfo">
          {infoList.map((item) => {
            return (
              <div className="grid-item justify_between listItem1">
                <span>{item.title}:</span>
                <span>{item.value}</span>
              </div>
            );
          })}
        </DeviceInfo>
      </div>

      <div className="dashboardCollection">
        <SpeedDashBoard
          isRotateBoard={true}
          speedData={rotateSpeedData}
          className="rotateBoard"
        />
        <SpeedDashBoard
          isRotateBoard={false}
          speedData={speedData}
          className="speedBoard"
        />
        <SpeedDashBoard
          isRotateBoard={true}
          speedData={rotateSpeedData}
          className="rotateBoard"
        />
      </div>

      <div className="justify_center">
        <Button>D</Button>
        <Button className="ml_default">N</Button>
        <Button className="ml_default">R</Button>
        <Button className="ml_default">P</Button>
      </div>
    </>
  );
}
